<template>
  <div>
    <x-Table
      :loading="loading"
      :table-data="tableData"
      :options-data="options"
      :pagination="pagination"
      :rule-form="ruleForms"
      @handleAdd="handleAdd"
      @handlePaginationCurrentChange="handlePaginationCurrentChange"
      @handlePaginationSizeChange="handlePaginationSizeChange"
      @handleHeardDel="handleHeardDel"
      @handleHeardEdit="handleHeardEdit"
      @resetForm="resetForm"

    >
    </x-Table>
    <!--    弹窗区域-->
    <el-dialog
      v-dialog-drag
      title="预览"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="45%"
    >
     <div v-html="content">

     </div>
    </el-dialog>
    <!--    end-->
  </div>
</template>

<script>
let _this;
export default {
  data() {
    return {
      content:'',//当前预览内容
      searchParams: {},//搜索对象
      loading:true,
      row: null, //当前选择数据
      ruleForms:{},
      pagination: {
        currentPage: 1,
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
      }, //分页参数
      otherParam: {
        halfCheckedKeys: [],
      }, //如果有其他情况会拼接这个参数
      formParam: {},
      dialogVisible: false,
      alertTitle: "添加",
      tableData: [],
      options: {
        buttonAdd:'添加',
        fields: {
          id: { label: "ID", prop: "id", width: "120", order: true },
          name: { label: "学生姓名", prop: "name",type:'two',options:{obj:'users',objKey:'name'} },
          phone: { label: "学生电话", prop: "phone",type:'two',options:{obj:'users',objKey:'phone'} },
          content: { label: "内容", prop: "content" },
          create_time: { label: "创建时间", prop: "create_time", order: true },
          button: {
            label: "操作",
            width: "130",
            type: "func",
            fixed: true,
            buttonEdit:'编辑',
            options:[{label:'预览',handle:function (scope){
              _this.content = scope['row']['content'];
                _this.dialogVisible = true;
              }}],
            del: function (scope) {
              _this.deleteNotice(scope["row"].id);
            },
          },
        },
      },
    };
  },
  methods: {
    resetForm:function (){
      _this.searchParams = {};
    },
    handlePaginationCurrentChange: function (val) {
      _this.loading = true;
      _this.pagination["currentPage"] = val;
      _this.search(_this.searchParams);
    },

    handlePaginationSizeChange: function (val) {
      _this.loading = true;
      _this.pagination["pageSize"] = val;
      _this.search(_this.searchParams);
    },

    /**
     * 通所有数据列表
     */
    getDataList: function () {
      _this.$store
        .dispatch("office/selectAllOfficeFeedback", {
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.office.feedbackList;
          this.tableData = data.data;
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    },

    /**
     *
     */
    handleHeardEdit: function (val) {
      let scope = val[0];
      _this.row = scope;
      _this.alertTitle = "编辑";
      _this.dialogVisible = true;
      setTimeout(() => {
        _this.fapi.setValue("roleName", scope.title);
        _this.fapi.setValue("weight", scope.weight);
        _this.fapi.setValue(
          "permission",
          scope.rules == null ? scope.rules : scope.rules.split(",")
        );
        _this.fapi.setValue("remark", scope.remark);
        _this.fapi.setValue("status", scope.status);
      }, 0);
    },

    /**
     * 批量删除
     */
    handleHeardDel: function (val) {
      let del = [];
      val.forEach((item, index) => {
        del.push(item.id);
      });
      _this.deleteNotice(del);
    },


    addDate: function (param) {
      _this.$store
        .dispatch("notice/addNotice", {
          title: param["title"],
          type: param["type"],
          content: param["content"],
          status: param["status"],
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.$message.success(msg);
            _this.getNoticeList();
          } else {
            _this.$message.error(msg);
          }
        });
    },
    /**
     * 表单提交回调
     */
    onSubmit: function (val) {
      if (_this.alertTitle === "添加") {
        _this.addDate(val);
      } else {
        //编辑
        _this.updateNotice(val);
      }
    },

    /**
     * 搜索角色标题
     */
    searchForm: function (val) {
      _this.searchParams = val;
      _this.loading = true;
      _this.search(val)
    },
    search(val){
      _this.$store
        .dispatch("notice/searchNotice", {
          page: _this.pagination["currentPage"],
          pageSize: _this.pagination["pageSize"],
          title: val.title,
          type: val.types,
        })
        .then(() => {
          _this.loading = false;
          _this.dialogVisible = false;
          let data = this.$store.state.notice.noticeList;
          this.tableData = data.data;
          _this.pagination["currentPage"] = data["current_page"];
          _this.pagination["total"] = data["total"];
        });
    },
    /**
     * 更新角色
     */
    updateNotice: function (param) {
      _this.$store
        .dispatch("notice/updateNotice", {
          id: _this.row["id"],
          title: param["title"],
          type: param["type"],
          content: param["content"],
          status: param["status"],
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.getNoticeList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },


    deleteNotice: function (val) {
      _this.$store
        .dispatch("office/delFeedback", {
          id: val,
        })
        .then((res) => {
          const { data, msg } = res;
          if (data) {
            _this.getDataList();
            _this.$message.success(msg);
            return;
          }
          return _this.$message.error(msg);
        });
    },

    /**
     *  表单导航栏添加点击
     */
    handleAdd: function () {
      _this.alertTitle = "添加";
      this.dialogVisible = true;
    },
  },
  watch: {
    dialogVisible(newVal) {
      setTimeout(() => {
        if (!newVal) {
          _this.fapi.resetFields(); //清空数据
          _this.fapi.setValue('content','');
        }
      }, 0);
    },
  },
  created() {
    _this = this;
  },
  mounted() {
    this.getDataList();
  },
};
</script>

<style scoped></style>
